<template>
  <f7-page class="qm-page" >
    <f7-link icon-f7="chevron_left" class="arrow" back></f7-link>
    <img
      src="static/img/land/index4/tupian(1).png"
      alt=""
      width="70px"
      height="70px"
      class="img"
    />
    <h3 class="title">欢迎登录工地智采</h3>
    <!-- 登录框 -->
    <f7-list>
      <qm-field
        v-model="user"
        placeholder="请输入您的账号"
        clearable
        clear-trigger="always"
        class="qmfield"
      >
        <template #left-icon>
          <img src="static/img/land/index4/my.svg" alt="" class="iconimg" />
        </template>
      </qm-field>
      <qm-field
        v-model="password"
        placeholder="请输入您的密码"
        :type="textstyle"
        class="qmfield"
      >
        <template #left-icon>
          <img
            src="static/img/land/index4/locking.svg"
            alt=""
            class="iconimg"
          />
        </template>
        <template #right-icon>
          <img
            src="static/img/land/index1/biyan.svg"
            alt=""
            width="30px"
            height="12px"
            v-if="!showpassword"
            @click="modifypassword()"
          />
            <img
            src="static/img/land/index1/kaiyan.svg"
            alt=""
            width="30px"
            height="12px"
            v-else
            @click="modifypassword()"
          />
        </template>
      </qm-field>
      <f7-link class="qm-link">忘记密码</f7-link>
    </f7-list>
    <!-- 登录按钮 -->
    <f7-button raised fill round class="qm-button">登录</f7-button>
    <div class="denglu">
      <f7-checkbox class="checkbox"></f7-checkbox>
      7天免登录
    </div>
     <div class="footer">广州市齐明软件科技有限公司提供技术支持</div>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      bgHeight:'',
      user: "",
      password: "",
      showpassword: false,
    };
  },
  computed: {
    textstyle() {
      if (this.showpassword) {
        return "text";
      } else {
        return "password";
      }
    },
  },
  methods: {
    modifypassword() {
      this.showpassword = !this.showpassword;
    },
  },
  created() {
    this.bgHeight = document.body.scrollHeight + "px";
  },

};
</script>

<style lang="less" scoped>
.arrow{
  position: fixed;
  color: var(--color-fill-grey-inverse);
  margin-top: 10px;
  left: 6%;
  }
.qm-page {
  background: url("../../../../static/img/land/index4/bgc4.png") ;
  background-repeat: no-repeat;
  margin: 0px;
  background-size: 100% 100%;
  background-attachment: fixed;
  width: 100%;
  height: 100vh;
  text-align: center;
  position: relative;
  .img {
    margin-top: calc(164px * var(--ratio));
  }
  .title {
    color: var(--color-fill-grey-inverse);
    font-size: 22px;
    font-weight: 500;
  }
  /deep/.van-cell {
    padding-bottom: 0px;
    margin-top: calc(40px * var(--ratio));
  }
  /deep/ .van-cell::after {
    border-bottom: 1px solid rgba(255, 255, 255, 0.52);
  }
  /deep/ .van-icon-clear:before {
    color: var(--color-fill-grey-inverse);
  }
  .qmfield {
    margin-left: calc(43px * var(--ratio));
    margin-right: calc(74px * var(--ratio));
    --f7-input-font-size: calc(28px * var(--ratio));
    --f7-input-text-color: var(--color-fill-grey-inverse);
    background-color: rgba(255, 255, 255, 0);
    width: 90%;
    /deep/ .van-field__left-icon {
      line-height: 40px;
      margin-right: calc(15px * var(--ratio));
    }
    /deep/ .van-field__control {
      width: 80%;
    }
    /deep/ .van-field__body {
      justify-content: space-between;
    }

    .iconimg {
      width: calc(35px * var(--ratio));
      height: calc(30px * var(--ratio));
    }
  }
  .qm-link {
    margin-left: 79%;
    font-size: 13px;
    margin-top: 10px;
    color: var(--color-brand);
  }
  .qm-button {
    margin: 0px calc(52px * var(--ratio));
    height: calc(62px * var(--ratio));
    background-color: var(--color-fill-grey-inverse);
    color: var(--color-brand);
    font-size: var(--font-size-maintitle);
    --f7-button-raised-box-shadow: auto;
  }
  .denglu{
    color: var(--color-fill-grey-inverse);
    text-align: center;
    font-size: 12px;
    margin-top: calc(43px * var(--ratio));
    --f7-checkbox-border-width: 0px;
    --f7-checkbox-size: 12px;
   /deep/ .checkbox{
      background-color: var(--color-fill-grey-inverse);
      margin-right: 10px;
      border-radius: 4px;
      .icon-checkbox{
        background-color: var(--color-fill-grey-inverse);
      }
      i:after{
        color: #3385ff;
        font-size: 10px;
      }
    }
  }
     .footer {
      position: absolute;
      text-align: center;
      color: var(--color-fill-grey-inverse);
      font-size: 12px;
      left: 0px;
      right: 0px;
      margin-top: 28%;
    }
  // 修改placeholder的颜色
  ::v-deep .van-field__control::-webkit-input-placeholder {
    color: var(--color-fill-grey-inverse);
  }
  /deep/input:-webkit-autofill { box-shadow: 0 0 0px 1000px #3385ff inset !important;}
}
</style>
